popupMenu: Use selected pseudoclass instead of class

- drop :focus from menuitem drawing
- update menuitem drawing function to style :selected

Fixes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7637
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3314>

diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 5d56d4c17b666273c04d122e47a9aa9715953879..3f0259019cb680afe149c09ad06858bbc52191cb 100644 (file)
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -376,11 +376,11 @@
   } @else {
     @include button(normal, $c:$bg);
   }
-  &:focus,
   &:hover {
     @include button(hover, $c:$bg);
   }
   &:active {@include button(active, $c:$bg);}
+  &:selected,
   &:checked {@include button(checked, $c:$bg);}
   &:insensitive {@include button(insensitive, $c:$bg);}
 }

diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index 3842d821816cda5623b3a1b908978feb05bd33fe..84455ddc0c3d94d3624a217db7831d0fe11809d6 100644 (file)
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -204,11 +204,11 @@ export const PopupBaseMenuItem = GObject.registerClass({
         if (activeChanged) {
             this._active = active;
             if (active) {
-                this.add_style_class_name('selected');
+                this.add_style_pseudo_class('selected');
                 if (this.can_focus)
                     this.grab_key_focus();
             } else {
-                this.remove_style_class_name('selected');
+                this.remove_style_pseudo_class('selected');
                 // Remove the CSS active state if the user press the button and
                 // while holding moves to another menu item, so we don't paint all items.
                 // The correct behaviour would be to set the new item with the CSS